<template>
  <div>
    <div class="img">
      <img src="@/assets/1.png" alt="" />
    </div>
    <div class="login-num">
      <p class="input-container">
        <label class="area-box">
          <span class="area_code">+86</span>
          <i class="area_icon"></i>
        </label>
        <input
          type="text"
          @blur="leave"
          v-model="username"
          placeholder="请输入手机号"
          class="first-input"
        />
      </p>
      <p class="input-container">
        <input
          type="password"
          v-model="userpass"
          placeholder="请输入密码"
          class="acc-input"
          @blur="numReg"
        />
      </p>
    </div>
    <div class="text">
      <input type="checkbox" />
      <span>
        我已阅读并同意<span class="col">「多抓鱼用户协议」</span>和<span
          class="col"
          >「隐私政策」</span
        >
      </span>
    </div>
    <div class="btn"><button @click="regSave"><router-link to="/Login">注册</router-link></button></div>
    <div class="text2"><router-link to="/My">跳转</router-link></div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Reg",
  data() {
    return {
      username: "",
      userpass: "",
    };
  },
  methods: {
    leave() {
      const reg =
        /^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i;
      if (
        this.username == "" ||
        this.username.length <= 10 ||
        !reg.test(this.username)
      ) {
        alert("手机号格式错误了");
      } else {
        //
      }
    },
    numReg() {
      const str = /^[a-zA-Z\d_]{8,}$/;
      if (this.userpass == "" || !str.test(this.userpass)) {
        alert("请输入正确密码");
      }
    },
    regSave() {
        let data = new URLSearchParams();
        data.append("username", this.username);
        data.append("userpass", this.userpass);
        axios({
          url: "http://localhost:80/php/addUser.php",
          method: "post",
          data,
        })
          .then((res) => {
            if (res.data == "success") {
              alert("注册成功");
            } else if (res.data == "fail") {
              alert("注册失败");
            }
          })
          .catch((err) => {
            console.log("出错了", err);
          });
      }
    },
};
</script>

<style scoped>
.img {
  width: 100%;
  margin: 0 auto;
}
.img > img {
  width: 100%;
  margin: 0.1rem 0;
}
.login-num {
  width: 90%;
  height: 0.8rem;
  margin: 0 auto;
}
.input-container {
  left: 0.1rem;
  position: relative;
  box-sizing: border-box;
  height: 0.4rem;
  padding-top: 0.05rem;
  padding-bottom: 0.1rem;
  overflow: hidden;
  background: #fff;
  border-bottom: 0.01rem solid #efefef;
}
.input-container .first-input {
  padding-top: 0.05rem;
  padding-left: 0.1rem;
}
.acc-input {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-left: 0.33rem;
}
.text {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
span {
  font-size: 0.13rem;
}
.col {
  display: inline-block;
  color: #45b29d;
}
.btn {
  width: 90%;
  margin: 0 auto;
}
button {
  color: #fff;
  background-color: #19c3a9;
  border: none;
  width: 100%;
  padding: 0.1rem 0;
  border-radius: 0.2rem;
  margin: 0.2rem 0;
}
.text2 {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 0.18rem;
}
.text > input {
  vertical-align: middle;
}
a {
  color: black;
}
</style>